<template>
<view class="user-info-body">
	<view class="users-info">
		<!-- 用户头像 -->
		<view class="user-avatar">
			<image src="../../../../../../static/logo.png" alt=""></image>
		</view>
		<!-- /用户头像 -->
		
		<!-- 用户名等 -->
		<view class="user-message">
			<view class="user-name" @click="toLogin()" v-show="!loginFlag">
				<text>立即登录</text>
			</view>
			<view class="user-name" v-show="loginFlag">
				<text>{{username}}</text>
			</view>
			<view class="get-personal">
				<view class="get-medal">
					<text>领取勋章></text>
				</view>
				<view class="personal-homepage">
					<text>个人主页></text>
				</view>
			</view>
		</view>
	</view>
	

</view>

</template>

<script setup>
	import { reactive,inject,ref,watch,onMounted } from 'vue'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	const userAllInfo = inject("userInfo")
	const loginFlag = ref(false)
	const username = ref("")
	const arrList =ref(Object.keys(userAllInfo.value)) 
	console.log(userAllInfo.value);
	// console.log("无语");
	
	
	watch( userAllInfo.value,(newValue,oldValue)=>{
		arrList.value = Object.keys(newValue.value)
	})
	
	onMounted(()=>{
		if(arrList.value.length==0){
				loginFlag.value = false
		}else{
				console.log("第一层");
				loginFlag.value = true
				console.log(userAllInfo.value);
				
				
				console.log(arrList);
				if(arrList.value.length!=0){
					console.log("第二层");
					if(userAllInfo.value.username!==undefined){
						// console.log(userAllInfo.value.username);
						username.value = userAllInfo.value.username
						// console.log(username.value);
					}
				}
		}
		
		
	})
	
	onShow(()=>{
		console.log(arrList.value.length);
		let user =  uni.getStorageSync("usreInfo")
		console.log(user);
	})
	
	


	// const userInfo = uni.getStorageSync("userInfo")
	// console.log(userInfo);
	const toLogin = () =>{
		uni.navigateTo({
			url:'/pages/Login/Login'
		})
	}
	
	
</script>

<style scoped lang="scss">
	uni-image{
		height: 100%;
		width: 100%;
	}
	.user-info-body{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 29rpx;
		>.users-info{
			margin-left: 25rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.user-avatar{
				height: 150rpx;
				width: 150rpx;
				// border: 1px black solid;
				border-radius: 50%;
				margin-right: 30rpx;
				overflow: hidden;
				>img{
					width: 100%;
				}
			}
			
			
			.user-message{
				
				.user-name{
					font-size: 40rpx;
					font-weight: 700;
				}
				.get-personal{
					margin-top: 10rpx;
					display: flex;
					font-size: 25rpx;
					.get-medal{
						text-align: center;
						background-color: rgb(238, 239, 244);
						border-radius: 20rpx;
						margin-right: 10rpx;
					}
					.personal-homepage{
						text-align: center;
						background-color: rgb(238, 239, 244);
						border-radius: 20rpx;
					}
				}
			}
		}
	}
	
</style>